@import '../../scss_variables.scss';

.UserBadge {
    cursor: default;

    .UserBadge-icon {
        margin-right: 16px;
        figure {
            width: 48px;
            height: 48px;
        }
    }
    &.mini {
        figure {
            margin: 0;
            display: inline-block;
            vertical-align: sub;
            width: 24px;
            height: 24px;

            ~ .username {
                margin-left: 6px;
            }
        }
        display: inline-flex;
        flex-direction: row;
        align-items: center;

        &.card-style {
            .username {
                border-radius: var(--border-radius-sm);
                background-color: var(--bg-light);
                margin-left: -12px;
                padding: 4px 8px 4px 18px;
            }
        }
    }

    .UserBadge-names {
        .username {
            margin-top: -4px;
        }
        .handle {
            margin-top: -6px;
        }
    }

    &:not(.mini) {
        &.card-style {
            .UserBadge-icon {
                border-radius: 100%;
                border-color: var(--bg);
                border-style: solid;
                border-width: 4px;
                z-index: 1;
            }
            .UserBadge-names {
                background-color: var(--bg-light);
                border-radius: var(--border-radius);
                margin-left: -36px;
                padding: 6px 20px 6px 32px;
                .username {
                    margin-top: 0px;
                }
                .handle {
                    margin-left: -4px;
                }
            }
        }
    }
}
